<template>
    <div id="getStarted">
        <div class="docsMain">
            <div class="page_container">
                <div class="title">✨ 快速上手</div>
                <p style="margin-top:20px">教您如何在项目中使用 
                <span class="subCode">BF-Design-Ui</span></p>
                <p style="margin-top:10px;font-size: 14px;color:#999">BF-Design-Ui 一套为开发者准备的基于 Vue 2.0 的UI组件库 为您创造高效工作体验!</p>
                <div class="blockquote">
                    <p>必要的基础知识不可缺少。在开始之前，推荐先学习 
                    <span class="a_started">
                        <a href="https://cn.vuejs.org/" target="_black">Vue2.0</a>
                    </span>和 
                    <span class="a_started">
                        <a href=" https://262.ecma-international.org/5.1/" target="_black">ES5</a>
                    </span>与 
                    <span class="a_started">
                        <a href=" https://babeljs.io/docs/en/learn" target="_black">ES6</a>
                    </span>， 并正确安装和配置了 
                    <span class="subCode">Node.js v10</span>或以上。 我们假设您已经掌握了 HTML、CSS 和 JavaScript 的初中级知识， 并且已经完全掌握了 Vue2.0 全家桶的正确开发方式, 如果您刚学习前端或Vue,不建议您第一步就使用UI框架。</p>
                </div>
                <div class="subtitle">1. 完整引入 BF-Design 
                <p style="margin-top:10px;font-size: 14px;color:#666;text-indent: 0.5em;">在 main.js 中写入以下内容：</p>
                <div class="vueCode" style="margin-top:10px; color:#D4D4D4;background-color:#f5f5f5;font-family:Consolas, &quot;font-size:20px;">
                    <span style="color:#c678dd;">
                        <div style="color:#1a1a1a;background-color:#f5f5f5;font-family:Consolas, &quot;font-size:20px;">
                            <div>
                            <span style="color:#c678dd;">import</span>&#160;
                            <span style="color:#00000073;">Vue</span>&#160;
                            <span style="color:#c678dd;">from</span>&#160;
                            <span style="color:#57a3f3;">'vue'</span></div>
                            <div>
                            <span style="color:#c678dd;">import</span>&#160;
                            <span style="color:#00000073;">App</span>&#160;
                            <span style="color:#c678dd;">from</span>&#160;
                            <span style="color:#57a3f3;">'./App.vue'</span></div>
                            <div>
                            <span style="color:#c678dd;">import</span>&#160;
                            <span style="color:#00000073;">router</span>&#160;
                            <span style="color:#c678dd;">from</span>&#160;
                            <span style="color:#57a3f3;">'./router'</span></div>
                            <div>
                            <span style="color:#c678dd;">import</span>&#160;
                            <span style="color:#00000073;">store</span>&#160;
                            <span style="color:#c678dd;">from</span>&#160;
                            <span style="color:#57a3f3;">'./store'</span></div>
                            <div>
                            <span style="color:#c678dd;">import</span>&#160;
                            <span style="color:#00000073;">bfDesign</span>&#160;
                            <span style="color:#c678dd;">from</span>&#160;
                            <span style="color:#57a3f3;">'bf-design-ui'</span></div>
                            <div>
                            <span style="color:#c678dd;">import</span>&#160;
                            <span style="color:#57a3f3;">'bf-design-ui/dist/styles/bf-design-ui.css'</span></div>
                            <div>
                            <span style="color:#756bb1;">Vue</span>.
                            <span style="color:#ef9431;">use</span>(
                            <span style="color:#00000073;">bfDesign</span>)</div>
                            <div>
                            <span style="color:#756bb1;">Vue</span>.
                            <span style="color:#00000073;">config</span>.
                            <span style="color:#00000073;">productionTip</span>&#160;=&#160;
                            <span style="color:#008dff;">false</span></div>
                            <br />
                            <div>
                            <span style="color:#008dff;">new</span>&#160;
                            <span style="color:#0b8235;">Vue</span>({</div>
                            <div>&#160;&#160;
                            <span style="color:#00000073;">router</span>,</div>
                            <div>&#160;&#160;
                            <span style="color:#00000073;">store</span>,</div>
                            <div>&#160;&#160;
                            <span style="color:#ef9431;">render</span>
                            <span style="color:#000000d9;">:</span>&#160;(
                            <span style="color:#ef9431;">h</span>)&#160;
                            <span style="color:#008dff;">=&gt;</span>&#160;
                            <span style="color:#ef9431;">h</span>(
                            <span style="color:#00000073;">App</span>),</div>
                            <div>}).
                            <span style="color:#ef9431;">$mount</span>(
                            <span style="color:#0b8235;">'#app'</span>)
                            <br /></div>
                        </div>
                    </span>
                </div>
                <p style="margin-top:10px;font-size: 14px;color:#666;text-indent: 0.5em;">以上代码便完成了 BF-Design-Ui 的引入。需要注意的是，样式文件需要单独引入</p></div>
                <div class="subtitle">2. 使用 BF-Design 的例子</div>
                <div class="vueCode" style="color:#D4D4D4;background-color:#f5f5f5;font-family:Consolas, &quot;font-size:20px;">
                    <div>
                        <span style="color:#008dff;">&lt;</span>
                        <span style="color:#008dff;">template</span>
                        <span style="color:#008dff;">&gt;</span>
                    </div>
                    <div>&#160;&#160;
                    <span style="color:#008dff;">&lt;</span>
                    <span style="color:#008dff;">div</span>&#160;
                    <span style="color:#57a3f3;">id</span>=
                    <span style="color:#ef9431;">"app"</span>
                    <span style="color:#008dff;">&gt;</span></div>
                    <div>&#160;&#160;&#160;&#160;
                    <span style="color:#008dff;">&lt;</span>
                    <span style="color:#008dff;">router-view</span>&#160;/
                    <span style="color:#008dff;">&gt;</span></div>
                    <div>&#160;&#160;&#160;&#160;
                    <span style="color:#008dff;">&lt;</span>
                    <span style="color:#008dff;">div</span>&#160;
                    <span style="color:#57a3f3;">class</span>=
                    <span style="color:#ef9431;">"box"</span>&#160;
                    <span style="color:#57a3f3;">style</span>=
                    <span style="color:#ef9431;">"margin-top:20px;"</span>
                    <span style="color:#008dff;">&gt;</span></div>
                    <div>&#160;&#160;&#160;&#160;&#160;&#160;
                    <span style="color:#008dff;">&lt;</span>
                    <span style="color:#008dff;">bf-button</span>
                    <span style="color:#008dff;">&gt;</span>
                    <span style="color:#666;">Default</span>
                    <span style="color:#008dff;">&lt;/</span>
                    <span style="color:#008dff;">bf-button</span>
                    <span style="color:#008dff;">&gt;</span></div>
                    <div>&#160;&#160;&#160;&#160;
                    <span style="color:#008dff;">&lt;/</span>
                    <span style="color:#008dff;">div</span>
                    <span style="color:#008dff;">&gt;</span></div>
                    <div>&#160;&#160;
                    <span style="color:#008dff;">&lt;/</span>
                    <span style="color:#008dff;">div</span>
                    <span style="color:#008dff;">&gt;</span></div>
                    <div>
                        <span style="color:#008dff;">&lt;/</span>
                        <span style="color:#008dff;">template</span>
                        <span style="color:#008dff;">&gt;</span>
                    </div>
                </div>
                <div class="subtitle">3. 按需引入 BF-Design</div>
                <p style="margin-top:10px;font-size: 14px;color:#666;text-indent: 0.5em;">使用插件 
                <span class="subCode">babel-plugin-import</span>可以实现按需加载组件，我们只引入需要的组件，以达到减小项目体积的目的。</p>
                <p style="margin-top:10px;font-size: 14px;color:#666;text-indent: 0.5em;">1. 首先，安装 babel-plugin-component：</p>
                <div class="preCode">npm install babel-plugin-import --save-dev</div>
                <p style="margin-top:10px;font-size: 14px;color:#666;text-indent: 0.5em;">2. 然后，将 .babelrc 修改为：</p>
                <div class="vueCode" style="color:#D4D4D4;background-color:#f5f5f5;font-family:Consolas, &quot;font-size:20px;">
                    <div>
                        <span style="color:#1a1a1a;">
                            <div style="color:#1a1a1a;background-color:#f5f5f5;font-family:Consolas, &quot;font-size:20px;">
                                <div>{</div>
                                <div>&#160;&#160;
                                <span style="color:#0b8235;">"presets"</span>:&#160;[[
                                <span style="color:#0b8235;">"es2015"</span>,&#160;{&#160;
                                <span style="color:#0b8235;">"modules"</span>
                                <span style="color:#9cdcfe;">:</span>&#160;
                                <span style="color:#569cd6;">false</span>&#160;}]],</div>
                                <div>&#160;&#160;
                                <span style="color:#0b8235;">"plugins"</span>:&#160;[</div>
                                <div>&#160;&#160;&#160;&#160;[
                                <span style="color:#0b8235;">"import"</span>,&#160;{</div>
                                <div>&#160;&#160;&#160;&#160;
                                <span style="color:#0b8235;">"libraryName"</span>
                                <span style="color:#9cdcfe;">:</span>&#160;
                                <span style="color:#0b8235;">"bf-design-ui"</span>,</div>
                                <div>&#160;&#160;&#160;&#160;
                                <span style="color:#0b8235;">"libraryDirectory"</span>
                                <span style="color:#9cdcfe;">:</span>&#160;
                                <span style="color:#0b8235;">"src/packages"</span></div>
                                <div>&#160;&#160;&#160;&#160;}]</div>
                                <div>&#160;&#160;]</div>
                                <div>}</div>
                            </div>
                        </span>
                    </div>
                </div>
                <p style="margin-top:10px;font-size: 14px;color:#666;text-indent: 0.5em;">3. 然后按照自己的需求引入组件，比如 
                <span class="subCode">Button</span>组件：</p>
                <div class="vueCode" style="color:#1a1a1a;background-color:#f5f5f5;font-family:Consolas, &quot;font-size:20px;">
                    <div>
                        <span style="color:#808080;">
                            <div style="color:#1a1a1a;background-color:#f5f5f5;font-family:Consolas, &quot;font-size:20px;">
                                <div>
                                    <span class="hljs-keyword" style="color:#F8AC59;font-family:Consolas, Menlo, Courier, monospace;font-size:14px;">
                                        <span class="hljs-keyword" style="color:#F8AC59;font-family:Consolas, Menlo, Courier, monospace;font-size:14px;">
                                            <div style="color:#1a1a1a;background-color:#f5f5f5;font-family:Consolas, &quot;font-size:20px;">
                                                <div>
                                                <span style="color:#c678dd;">import</span>&#160;{&#160;
                                                <span style="color:#008dff;">Button</span>&#160;}&#160;
                                                <span style="color:#c678dd;">from</span>&#160;
                                                <span style="color:#ef9431;">'monkey-view'</span>;</div>
                                                <div>
                                                <span style="color:#0b8235;">Vue</span>.
                                                <span style="color:#ef9431;">component</span>(
                                                <span style="color:#ef9431;">'Button'</span>,&#160;
                                                <span style="color:#008dff;">Button</span>);</div>
                                            </div>
                                        </span>
                                        <span style="color:#333333;font-family:Consolas, Menlo, Courier, monospace;font-size:14px;background-color:#FAFAFA;"></span>
                                    </span>
                                    <span style="color:#333333;font-family:Consolas, Menlo, Courier, monospace;font-size:14px;background-color:#FAFAFA;"></span>
                                </div>
                                <div></div>
                            </div>
                        </span>
                    </div>
                    <div>
                        <span style="color:#808080;"></span>
                        <span style="color:#569cd6;"></span>
                        <span style="color:#808080;"></span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
  name: "",
  components: {},
  data() {
    return {};
  },
  computed: {},
  methods: {
    goStarted() {
      this.$emit("toSubtitle", 1);
    },
  },
  created() {},
  mounted() {},
};
</script>
<style lang='scss'>
#getStarted {
  .docsMain {
    height: 100%;
    min-height: auto;
    background: #fff;
    .page_container {
      width: 100%;
      margin: 0 auto;
      .title {
        font-size: 26px;
        font-weight: bold;
        font-family: Avenir, -apple-system, BlinkMacSystemFont, segoe ui, Roboto,
          helvetica neue, Arial, noto sans, sans-serif, apple color emoji,
          segoe ui emoji, segoe ui symbol, noto color emoji, sans-serif;
        line-height: 26px;
        margin-top: 8px;
        color: #000000d9;
      }
      .subtitle {
        clear: both;
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 20px;
        margin-top: 30px;
        font-family: Avenir, -apple-system, BlinkMacSystemFont, segoe ui, Roboto,
          helvetica neue, Arial, noto sans, sans-serif, apple color emoji,
          segoe ui emoji, segoe ui symbol, noto color emoji, sans-serif;
        color: #000000d9;
      }
      p {
        margin: 10px 0;
        font-size: 16px;
        color: #666;
        letter-spacing: 0.5pt;
      }
      .blockquote {
        margin: 1em 0;
        padding-left: 0.8em;
        color: #00000073;
        font-size: 14px;
        background-color: #f5f5f5;
        padding-top: 5px;
        padding-bottom: 5px;
        border-left: 4px solid #999;
        P {
          font-size: 14px;
        }
      }
      .baseCode {
        margin: 0 1px;
        padding: 0.2em 0.4em;
        font-size: 0.9em;
        background: #f5f5f5;
        color: #333;
        border: 1px solid #f0f0f0;
        border-radius: 3px;
      }
      .vueCode{
        margin: 0 5px;
        padding: 1em 1em;
        font-size: 14px;
        background: #f5f5f5;
        color: #333;
        border: 1px solid #f0f0f0;
        border-radius: 3px;
      }
      .subCode {
        display: inline-block;
        font-style: normal;
        font-size: 0.9em;
        color: #ef9431;
        background-color: #fef7ee;
        padding: 1px 5px;
        border-radius: 2px;
        margin: 1px 3px;
        font-family: Consolas, Menlo, Courier, monospace;
      }
      .preCode {
        background-color: #f5f5f5;
        margin: 0;
        color: #333;
        padding: 15px 20px;
      }

      .a_started {
        color: #57a3f3;
        cursor: pointer;
        a {
          color: #57a3f3;
          cursor: pointer;
          &:hover {
            color: #57a3f3;
          }
        }
        &:hover {
          color: #57a3f3;
        }
      }
    }
  }
}
</style>